<script>
import { isObject, isString } from '@/utils/kris_utils'


export default {
    components:{
        
    },
    props:{
        fallback:{
            type:String,
            default:'-'
        },
        isEditing:false,
        // 获取数据的函数（如果使用搜索就带kw参数）
        fetchDataFn:{
            type:Function,
            default:(kw) => {}
        },
        // 是否初始化
        init:{
            type:Boolean,
            required:false,
            default:false
        },
        localSearch:{
            type:Boolean,
            required:false,
            default:false
        },
        clearOptionsOnNoKw:{
            type:Boolean,
            required:false,
            default:true
        },
        waitForFirstInit:{
            type:Boolean,
            required:false,
            default:true
        }
    },
    data(){
        return {
            options:[],
            loading:false,
            inited:false
        }
    },
    computed:{
        attrs(){
            let attrs = {...this.$attrs}

            attrs['loading'] = this.loading
            attrs['filterable'] = true
            attrs['remote'] = this.localSearch === false
            attrs['remote-method'] = this.handleKw

            return attrs
        },
        listeners(){
            return this.$listeners
        },
        valueFormatted(){
            if(!this.$attrs.value)
                return this.fallback

            return this.$attrs.value.label
        }
    },
    methods:{
        async handleKw(kw){
            if(isString(kw) && kw.trim() !== ''){
                this.fetchData(kw)
            }else if(this.clearOptionsOnNoKw){
                this.options = []
            }
        },
        async fetchData(kw){
            let result = await this.fetchDataFn(kw)
            this.options = result
        },
        async loadData(){
            try {
                this.loading = true

                let result = await Promise.allSettled([
                    this.fetchData()
                ])

                let failTasks = result.filter(item => item.status === 'rejected')
                if(failTasks.length > 0)
                    throw failTasks[0].reason

                this.loading = false
            }catch(e){
                this.loading = false
                throw e
            }
        }
    },
    watch:{
        '$attrs.value':function(value){
            if(this.init || this.inited || !isObject(value))
                return

            this.inited = true
            this.options = [ { ...this.$attrs.value } ]
        }
    },
    created(){        
        if(this.init)
            this.loadData()
    }
}
</script>

<template>
    <el-select
      v-if="isEditing"
      v-bind="attrs"
      v-on="listeners"
    >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item" 
        />
    </el-select>

    <span v-else>{{ valueFormatted }}</span>
</template>

<style lang="scss">
</style>